<template>
  <div>
    <div class="page-header">
      <div class="left">
        <h3 class="page-title">个人信息</h3>
        <ul class="breadcrumb">
          <li class="breadcrumb-item">
            <router-link :to="{ path: '/' }">首页</router-link>
          </li>
          <li class="breadcrumb-item active">用户列表</li>
        </ul>
      </div>
      <div class="right" title="添加课程" @click="onAdd()">
        <el-icon style="margin: 5px 0;display:block;">
          <Plus/>
        </el-icon>
      </div>
    </div>
    <el-card>
      <template #header>
        <div>
          <span>个人信息</span>
        </div>
      </template>
      <el-row>
        <el-col :span="3">
          <div>
            <el-avatar :size="100">
              <el-icon size="80">
                <Avatar/>
              </el-icon>
            </el-avatar>
          </div>
        </el-col>
        <el-col :span="18">
          <div>
<span style="line-height: 2em">账号:&nbsp;{{ state.userInfo.name }}
</span><br>
            <span style="line-height: 2em">姓名:&nbsp;{{ state.userInfo.userName }}
</span><br>
            <span style="line-height: 2em">电话:&nbsp;{{ state.userInfo.mobile }}
</span><br>
            <span style="line-height: 2em">邮箱:&nbsp;{{ state.userInfo.email }}
</span><br>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup>
import {onMounted, reactive} from "vue";
import {Avatar} from "@element-plus/icons-vue";

const state = reactive({
  userInfo: {}
})
onMounted(() => {
  state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
})
</script>
